<template>
  <el-drawer
    v-model="drawer"
    title="布局设置"
    :direction="direction"
    :before-close="(done: () => void) => {done()}"
  >
    <span class="drawer_content">
      <ul>
        <li v-for="item in settingList" :key="item.key">
          <template v-if="item.type == 'color'">
            <el-color-picker
              size="small"
              v-model="setting[item.key]"
              @change="changeData(item.key, $event)"
            />
            <span class="tit">{{ item.label }}</span>
          </template>
          <template v-if="item.type == 'check'">
            <el-checkbox
              class="btn"
              v-model="setting[item.key]"
              :label="item.label"
              @change="changeData(item.key, $event)"
            />
          </template>
        </li>
      </ul>
    </span>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { storeToRefs } from "pinia";
import { useMenuStore } from "@/store/config/menu";

const settingList = [
  {
    key: "background",
    label: "背景颜色",
    type: "color",
  },
  {
    key: "fontColor",
    label: "字体颜色",
    type: "color",
  },
  {
    key: "crumbs",
    label: "面包屑",
    type: "check",
  },
  {
    key: "menu",
    label: "路由菜单",
    type: "check",
  },
  {
    key: "navMenu",
    label: "导航菜单",
    type: "check",
  },
];

const store = useMenuStore();
const { setting } = storeToRefs(store);

const drawer = ref(false);
const direction = ref("rtl");
const handleClose = (done: () => void) => {};

const changeData = (key: string, val: any) => {
  let obj: any = { [key]: val };
  store.updateMenu(obj);
};

defineExpose({
  drawer,
});
</script>

<style scoped></style>
